<template>
	<view>
		<u-cell-group>
			<u-cell-item title="选择内置背景图" :title-style="{ marginLeft: '10rpx' }" @click="linkToBuiltinBgImg"></u-cell-item>
		</u-cell-group>
		<view style="height: 10rpx;"></view>
		<u-cell-group>
			<u-cell-item title="通过手机选择" :title-style="{ marginLeft: '10rpx' }" @click="chooseImg"></u-cell-item>
		</u-cell-group>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { api } from '../../api/api';

export default {
	data() {
		return {};
	},
	methods: {
		async chooseImg() {
		    var self = this; // 将 this 绑定到 self 变量
		    var user = uni.getStorageSync('_user_info');
		    var upload_url = this.$BASE_URL + api.upload;
		
		    // 弹出选择对话框，允许用户选择相册或拍照
		    plus.nativeUI.actionSheet({
		        cancel: '取消',
		        buttons: [
		            { title: '拍照' },
		            { title: '从相册选择' }
		        ]
		    }, function(e) {
		        if (e.index === 1) {
		            // 用户选择了“拍照”
		            captureImage();
		        } else if (e.index === 2) {
		            // 用户选择了“从相册选择”
		            pickFromGallery();
		        }
		    });
		
		    // 调用拍照
		    function captureImage() {
		        var cmr = plus.camera.getCamera();
		        cmr.captureImage(function(path) {
		            uploadImage(path);
		        }, function(e) {
		            console.log('取消拍照: ' + e.message);
		        }, { crop: { width: '750px', height: '500px', quality: 100, resize: false } });
		    }
		
		    // 打开相册
		    function pickFromGallery() {
		        plus.gallery.pick(function(path) {
		            uploadImage(path);
		        }, function(e) {
		            console.log('取消选择');
		        }, { filter: "image", crop: { width: '750px', height: '500px', quality: 100, resize: false } });
		    }
		
		    async function uploadImage(path) {
		        // 1. 创建一个上传任务对象
		        var task = plus.uploader.createUpload(upload_url,
		            {},
		            function(t, status) {
		                var resp = JSON.parse(t.responseText);
		                // 上传完成
		                if (resp.code == 200 && resp.httpCode == 200) {
		                    self.$u.vuex('_user_info.pictureBanner', resp.data.url); // 更新本地缓存
		                    plus.nativeUI.toast('更换成功'); // 显示成功提示
							self.$u.route({ type: 'back'}); // 页面跳转
		                } else {
		                    plus.nativeUI.toast('上传失败');
		                }
		            }.bind(self) // 确保 this 指向正确
		        );
		        // 2. 添加上传的文件
		        task.addFile(path, { key: "file" });
		        // 3. 设置其他参数
		        task.addData("userId", user.id + "");
		        task.addData("uploadType", 'picture_banner');
		        // 4. 上传
		        task.start();
		    }
		},

		linkToBuiltinBgImg() {
			this.$u.route('pages/builtinBgImg/builtinBgImg');
		},
		emitVuex(path) {
			this.$u.vuex('_user_info.pictureBanner', path);
			this.$u.route({ type: 'back' });
			uni.$off('uAvatarCropper', this.emitVuex);
		}
	},
	created() {
		// 监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', this.emitVuex);
	}
};
</script>

<style></style>
